<%@ include file="/common/taglibs.jsp"%>
<fmt:message key="headerSelection" scope="request" var="hs" />
<head>
    <title><fmt:message key="productTypeDetail.title"/></title>
    <meta name="heading" content="<fmt:message key='productTypeDetail.heading'/>"/>
    <meta name="menu" content="MaterialMenu"/>
    <script type="text/javascript">
        dojo.event.topic.subscribe("/save", function(data, type, request) {
            if(type == "load") {
                dojo.byId("distinctiveIndex").value = "";
                //dojo.byId("distinctiveIndex1").value = "";
                dojo.byId("distinctiveId").value = "";
                //dojo.byId("distinctiveName").value = "";
                // dojo.byId("distinctiveValue").value = "";

                //document.getElementById('deleteFeatureProductForm').style.display = 'none';
            }
        });
        function editFeatureProduct(row){
            System.out.print("editing distinctive...");
            dojo.byId("distinctiveIndex").value = row.rowIndex - 1;
            //dojo.byId("distinctiveIndex1").value = row.rowIndex - 1;

            var tds = row.getElementsByTagName("td");

            dojo.byId("distinctiveId").value = dojo.string.trim(dojo.dom.textContent(tds[0]));
            dojo.byId("distinctiveName").value = dojo.string.trim(dojo.dom.textContent(tds[1]));
            dojo.byId("distinctiveDescription").value = dojo.string.trim(dojo.dom.textContent(tds[2]));

            //document.getElementById('deleteFeatureProductForm').style.display = 'inline';

            $('addFeatureProductButton').fade();
            Effect.SlideDown('divFeatureProductForm');
            return false;
        }
        function retrieveURL(url)
        {
            if (window.XMLHttpRequest)
            {
                // Non-IE browsers
                req = new XMLHttpRequest();
                req.onreadystatechange = processStateChange;
                try {
                    req.open("GET", url, true);
                } catch (e) {
                    alert(e);
                }
                req.send(null);
            } else if (window.ActiveXObject) { // IE
                req = new ActiveXObject("Microsoft.XMLHTTP");
                if (req) {
                    req.onreadystatechange =
                        processStateChange;
                    req.open("GET", url, true);
                    req.send();
                }
            }
        }

        function processStateChange() {
            if (req.readyState == 4) { // Complete
                if (req.status == 200) { // OK response
                    document.getElementById("distinctivesDescriptions").innerHTML = req.responseText;
                } else {
                    alert("Problem: " + req.statusText);
                }
            }
        }
    </script>
</head>
<fmt:message key="report" scope="request" var="report"/>


<div>

    <s:form id="productForm"  enctype="multipart/form-data" action="saveProductType" method="post" validate="true">
        <s:hidden name="productType.id" value="%{productType.id}"/>
        <s:textfield maxLength="60" key="productType.name" required="true" cssClass="text medium" />
        <s:textfield maxLength="60" key="productType.nameEs" required="true" cssClass="text medium" />
        <s:textarea rows="10" cols="40" key="productType.observation" required="true" cssClass="text medium" />
        <s:textarea rows="10" cols="40" key="productType.observationEs" required="true" cssClass="text medium" />
        <s:file key="file" name="file" />

        <s:url id="image" action="getProductTypeImage">
            <s:param name="idProductType" value="%{productType.id}" />
        </s:url>
        <img src="<s:property value="#image" />"  height="100" width="100"/>
        
        
        <s:optiontransferselect
            listKey="value"
            listValue="label"
            list="productListLeft"
            allowSelectAll="true"
            selectAllLabel="Select all"
            doubleListKey="value"
            doubleListValue="label"
            doubleName="productOptionsPicked"
            doubleList="productListRight"
            />

        <li class="buttonBar bottom">
            <s:submit cssClass="button" method="save" key="button.save" theme="simple"/>
            <c:if test="${not empty productType.id}">
                <s:submit cssClass="button" method="delete" key="button.delete" onclick="return confirmDelete('product type')" theme="simple"/>
            </c:if>
            <s:submit cssClass="button" method="cancel" key="button.cancel" theme="simple"/>
        </li>
    </s:form>
</div>

<script type="text/javascript">
    // Form.focusFirstElement($("productForm"));
    // document.getElementById('divFeatureProduct').style.top = document.getElementById('productForm').offsetTop+"px";

</script>
